<template>
  <div :style='{width,height}'>
    <div :id="editorId" style='width:100%;height:100%;'></div> <!--宽高自行设定 -->
  </div>
</template>
<script>
import * as monaco from 'monaco-editor' // 引入monaco框架
export default {
  name: 'CodeEditor',
  data () {
    return {
      monacoEditor: null
    }
  },
  props: { // 接收页面传值
    readOnly: {
      type: Boolean,
      default: false
    },
    height: {
      type: String,
      default: '100px'
    },
    width: {
      type: String,
      default: '100%'
    },
    language: {
      type: String,
      default: 'json'
    },
    editorId: {
      type: String,
      default: 'editor'
    },
    value: {
      type: String,
      default: ''
    }
  },
  watch: {
    height () {
      this.reSize()
    },
    width () {
      this.reSize()
    },
    editorId: {
      handler (val) {
        if (val) {
          this.editorMounted(val)
        }
      },
      immediate: true
    },
    value: function(val) {
      this.setVal(val)
    }
  },
  mounted () {
  },
  methods: {
    editorMounted (val) { // 创建一个代码编辑器实例
      this.$nextTick(() => {
        // const data = {code:200,data:{},resultMsg:""}
        // const model = monaco.editor.createModel(JSON.stringify(data), this.language) // 创建一个新的文本模型实例
        const params = {
          language: this.language, // 当前使用的编辑器的语言，可以根据个人需求设置所需语言，也可以通过父组件中传入的方式使用（目前使用的是javascript）
          automaticLayout: true, // 是否可以允许自动调整布局以适应父容器的大小，当启用时，编辑器会根据所在容器大小发生变化，如果禁用了，则会保持初始大小，不会根据父元素进行自动调整
          readOnly: this.readOnly, // 控制编辑器是否只读，不允许进行编辑
          theme: 'vs', // 编辑器的主题，可选项有：vs,vs-drak,hc-block,hc-light
          // model: model, // 设置编辑器的初始值
          minimap: {
            enabled: true
          },
          fontSize: 16 // 编辑器的字体大小
        }
        this.monacoEditor = monaco.editor.create(document.getElementById(val), params) // 根据id创建一个编辑器实例
        //监听内容变化
        this.monacoEditor.onDidChangeModelContent(() => {

        })
        // 监听失去焦点事件
        this.monacoEditor.onDidBlurEditorText((e) => {
          this.$emit('input', this.getVal())
        });
      })
    },
    setVal (value) { // 给编辑器中传入值
      if(value!==this.getVal()){
        this.monacoEditor.setValue(value)
        this.setTri()
      }
    },
    setLanguage(){
      // 创建后再次修改language
      const model = this.monacoEditor.getModel()
      this.monacoEditor.setModelLanguage(model, this.language)
    },
    // 格式化编辑器中的字符串
    setTri () {
      if (this.readOnly) { // 注意：当编辑器是只读状态的话，无法对编辑器中的内容进行格式化操作
        this.monacoEditor.updateOptions({ readOnly: false })
        this.monacoEditor.trigger('提示', 'editor.action.formatDocument')
        setTimeout(() => {
          this.monacoEditor.updateOptions({ readOnly: true })
        }, 200)
      } else {
        this.monacoEditor.trigger('提示', 'editor.action.formatDocument')
      }
    },
    getVal () { // 获取组件中录入的值
      let val = this.monacoEditor.getValue();
      try {
        // 解析并重新序列化为紧凑格式的JSON字符串
        val = JSON.stringify(JSON.parse(val));
      } catch (e) {
        console.error('Invalid JSON:', e);
      }
      return val;
    },
    reSize () { // 当宽高改变时重新布局编辑器
      this.$nextTick(() => {
        this.monacoEditor.layout()
      })
    }
  },
  beforeDestroy () { // 释放编辑器占用的资源
    this.monacoEditor.dispose()
  }
}
</script>
